import { hasPayServiceApi } from '@/api/Plan';
import { request } from '@/api/request';
import TestPaperDetail from '@/components/resourceLibraryComp/TestPaperDetail';
import { useAppSelector } from '@/redux/store';
import { useReactive } from 'ahooks';
import { Drawer } from 'antd';
import type { YmColumnType } from 'ym-design';
import { YmTable } from 'ym-design';
type TableRecord = {
  createTime: string;
  modifyTime: string;
  resourceId: string;
  resourceName: string;
  isCharge?: number;
};

interface Props {
  pName?: string;
  cName?: string;
  classId?: string;
}
export default function ({ classId, pName, cName }: Props) {
  const { entId, organizationType } = useAppSelector((state) => state.loginEnt);
  const detailsPorps = useReactive<{ props: { coursewareId: string; isCharge: number; hasPayService?: boolean } }>({
    props: { coursewareId: '', isCharge: 0 },
  });
  const columns: YmColumnType<TableRecord>[] = [
    {
      title: '试卷名称',
      dataIndex: 'resourceName',
      key: 'resourceName',
      width: 400,
    },
    {
      title: '时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
      width: 120,
    },
    {
      title: '类型',
      dataIndex: 'isCharge',
      key: 'isCharge',
      width: 80,
      hidden: organizationType === 1,
      render: (text, record) => <span>{text == 1 ? '收费' : '免费'} </span>,
    },
    {
      key: '_operate',
      title: '操作',
      width: 60,
    },
  ];

  return (
    <>
      {entId ? (
        <YmTable<TableRecord, { name?: string }>
          rowKey="resourceId"
          searchForm={{
            formItems: [
              {
                label: '名称',
                name: 'name',
                valueType: {
                  type: 'input',
                  inputProps: {
                    autoComplete: 'off',
                  },
                },
              },
            ],
          }}
          toolBar={false}
          columns={columns}
          request={async (table, form) => {
            const { data } = await request<{ list: TableRecord[]; total: number }>('/safe/api/entPlatform/paperList', {
              params: {
                entId,
                classId: classId,
                ...form,
                pageNum: table.page?.pageIndex,
                pageSize: table.page?.pageSize,
              },
            });
            return data;
          }}
          operate={[
            {
              text: '详情',
              key: 'op',
              onClick(record) {
                console.log(record);
                if (entId && organizationType === 0 && record.isCharge === 1) {
                  //当前企业是否购买学习位
                  hasPayServiceApi({ entId })
                    .then((res) => {
                      if (res.code === '200') {
                        detailsPorps.props = {
                          isCharge: record.isCharge || 0,
                          coursewareId: record.resourceId,
                          hasPayService: !!res.data,
                        };
                      }
                    })
                    .catch((err) => {
                      console.log('--TestPaperDetail--hasPayServiceApi--err--:', err);
                    });
                } else {
                  detailsPorps.props = {
                    isCharge: record.isCharge || 0,
                    coursewareId: record.resourceId,
                  };
                }
              },
            },
          ]}
        />
      ) : null}
      <Drawer
        width={800}
        open={Boolean(detailsPorps.props.coursewareId)}
        title="详情"
        bodyStyle={{
          background: '#eff2f5',
          padding: '12px',
        }}
        onClose={() => {
          detailsPorps.props.isCharge = 0;
          detailsPorps.props.coursewareId = '';
        }}
      >
        <TestPaperDetail {...detailsPorps.props} />
      </Drawer>
    </>
  );
}
